.container {
  .channelWrapper {
    min-width: 180px;
  }
  .messageWrapper {
    flex-grow: 3 !important;
    position: relative;

    .messageField {
      &.showBadge {
        padding-right: 80px;
      }
    }
  }

  .badge {
    position: absolute;
    background-color: var(--pubSubClientsBadge) !important;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: var(--htmlColor)  !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease-in-out;

    &.show {
      opacity: 1;
      pointer-events: auto;
    }

    :global(.euiBadge__text) {
      display: flex;
      align-items: center;
    }

    .affectedClients {
      margin-left: 6px;
    }

    .iconUserBadge {
      color: var(--htmlColor) !important;
      margin-bottom: 2px;
    }
  }
}
